﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/plugins/layui/css/layui.css"  media="all">
  <link href="/build/css/ztree/metro/ztree.css" rel="stylesheet" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="kit-table" style="padding:10px;">
    <div class="" style="width:200px;float:left;padding:5px;">
        <a href="javascript:;" class="layui-btn layui-btn-mini" id="add" style="width:100%;"><i class="layui-icon">&#xe608;</i></a>
        <ul id="ztree" class="ztree" style="background-color: #f2f2f2; padding-bottom:15px;"></ul>
    </div>
    <div class="" style="width:calc(100% - 210px);float:right;">
        <table class="layui-table" style="margin:5px 0;">
            <colgroup>
                <col width="150">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <td colspan="2">部门详情</td>
                </tr>
            </thead>
            <tbody id="detail">
                <tr>
                    <td colspan="2">点击左侧部门查看详情.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-clear"></div>
</div>
<script type="text/html" id="edit-tpl">
    <div style="margin:10px">
        <form class="layui-form" lay-filter="form-edit">
            <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MzOPDdM6GBPscKM1BOr7U3kTpYkr1yHroNJqBpulj4f2TRNuHEQ1SiTNygl4YVo_pTpVgWFu4NGUu2y2tb1peSa47cHItgNMvkKIdtk2057KV9NqnU-NZrNfkunjuoobbW4fi_zMZcT29djSbMdduEYPShB4Xxt4XbIRqXzx_YK7_RYF7zqoBq0kCcrwC6xXg" />
            <input type="hidden" name="id" value="{{d.id}}" />
            <div class="layui-form-item" style="position:relative;">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-inline">
                    <input type="text" name="parentId" id="parentId" disabled="disabled" data-id="{{ d.parentId }}" value="{{d.parentName}}" class="layui-input">
                    <div id="departmentContent" class="departmentContent layui-anim layui-anim-upbit" 
                         style="display:none; position: absolute;z-index:9;background-color:white; width:100%;box-shadow:0px 3px 5px 0px #ccc;">
                        <ul id="treeDemo" class="ztree" style="margin-top:0;padding-bottom:10px;"></ul>
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="padding:7px 0!important;">
                    <a href="javascript:;" class="layui-btn layui-btn-small" id="select-department">选择部门</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" value="{{d.name}}" placeholder="请输入部门名称." autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort" required lay-verify="required" value="{{d.sort}}" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span style="color:red;">值越大越靠前.</span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注信息." class="layui-textarea">{{d.remark}}</textarea>
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formEdit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="iconTpl">
    {{# if(d.icon){ }}
    {{# if (d.icon.indexOf('fa-') !== -1) { }}
    <i class="fa {{ d.icon }}" aria-hidden="true"></i>
    {{# } else { }}
    <i class="layui-icon">{{ d.icon }}</i>'
    {{# } }}
    {{# } }}
</script>
<script type="text/html" id="detailTpl">
    <tr>
        <td style="text-align:right;">所属部门</td>
        <td>{{d.parentId}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">部门名称</td>
        <td>{{d.name}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">排序值</td>
        <td>{{d.sort}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">创建时间</td>
        <td>{{d.createTime}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">备注</td>
        <td>{{d.remark}}</td>
    </tr>
</script>
<script src="/plugins/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.config({
        base: '/build/js/'
    }).use(['jquery', 'layer', 'ztree','laytpl','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            laytpl = layui.laytpl,
            utils = layui.utils,
            _body = $('body');
        var departments = [{"ID":21,"Name":"部门1-1-2"},{"ID":1,"Name":"总经办"},{"ID":5,"Name":"财务部"},{"ID":6,"Name":"子公司一"},{"ID":7,"Name":"运营部"},{"ID":8,"Name":"客服部"},{"ID":9,"Name":"子公司二"},{"ID":10,"Name":"技术部一"},{"ID":11,"Name":"技术部二"},{"ID":12,"Name":"客服一部"},{"ID":13,"Name":"客服二部"},{"ID":14,"Name":"技术部"},{"ID":15,"Name":"技术部三"},{"ID":16,"Name":"公司二"},{"ID":17,"Name":"部门1"},{"ID":18,"Name":"部门1-1"},{"ID":20,"Name":"部门1-2"}];

        $('#add').on('click', function () {
            save('add');
        });
        var editIndex, loadIndex;
        form.on('submit(formEdit)', function (data) {
            loadIndex = utils.load(2);
            var url = data.field.id === '0' ? '/Department/Create' : '/Department/Edit';
            data.field.parentId = $('#parentId').data('id')
            $.post(url, data.field, function (res) {
                loadIndex && layer.close(loadIndex);
                layer.msg(res.msg);
                if (res.rel) {
                    editIndex && layer.close(editIndex); //关闭弹出层
                }
            });
            return false;
        });
        /**
         * 新增,修改部门
         */
        function save(action, data) {
            var defaults= {
                id: 0,
                name: '',
                remark: '',
                departments: departments,
                sort: 0,
                parentId: 0,
                parentName:'默认部门'
            };
            $.extend(true, defaults, data);
            var title = action === 'add' ? '<i class="layui-icon">&#xe608;</i> 新增部门':'编辑部门';
            //渲染
            laytpl($('#edit-tpl').html()).render(defaults,function (html) {
                    layer.open({
                        type: 1,
                        title: title,
                        content: html,
                        area: ['600px', '400px'],
                        btn: ['提交', '重置', '取消'],
                        yes: function (index, layero) {
                            editIndex = index;
                            $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                        },
                        btn2: function (index, layero) {
                            $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                            return false;
                        },
                        success: function () {
                            form.render(null, 'form-edit');
                            bindSelectedDepartmentEvent();
                        }
                    });
                });
        }
        var zNodes = [{"id":1,"name":"总经办","children":[{"id":5,"name":"财务部","children":null,"isParent":false,"open":true},{"id":6,"name":"子公司一","children":[{"id":7,"name":"运营部","children":null,"isParent":false,"open":true},{"id":8,"name":"客服部","children":[{"id":12,"name":"客服一部","children":null,"isParent":false,"open":true},{"id":13,"name":"客服二部","children":null,"isParent":false,"open":true}],"isParent":true,"open":true},{"id":14,"name":"技术部","children":null,"isParent":false,"open":true}],"isParent":true,"open":true},{"id":9,"name":"子公司二","children":[{"id":10,"name":"技术部一","children":null,"isParent":false,"open":true},{"id":11,"name":"技术部二","children":null,"isParent":false,"open":true},{"id":15,"name":"技术部三","children":null,"isParent":false,"open":true}],"isParent":true,"open":true}],"isParent":true,"open":true},{"id":16,"name":"公司二","children":[{"id":17,"name":"部门1","children":[{"id":18,"name":"部门1-1","children":[{"id":21,"name":"部门1-1-2","children":null,"isParent":false,"open":true}],"isParent":true,"open":true},{"id":20,"name":"部门1-2","children":null,"isParent":false,"open":true}],"isParent":true,"open":true}],"isParent":true,"open":true}];
        var setting = {
            view: {
                addHoverDom: function (treeId, treeNode) {
                    var _obj = $("#" + treeNode.tId + "_span");
                    if (treeNode.editNameFlag || $("#kit-tree-add-" + treeNode.tId).length > 0)
                        return;
                    var htm = "<span class='button add' id='kit-tree-add-" + treeNode.tId + "' title='新增部门' onfocus='this.blur();'></span>";
                    _obj.after(htm);
                    var btn = $("#kit-tree-add-" + treeNode.tId);
                    if (btn) {
                        btn.bind("click", function () {
                            save('add', {
                                parentId: treeNode.id,
                                parentName: treeNode.name
                            });
                            return false;
                        });
                    }
                },
                removeHoverDom: function (treeId, treeNode) {
                    $("#kit-tree-add-" + treeNode.tId).unbind().remove();
                },
                selectedMulti: false
            },
            edit: {
                enable: true,
                renameTitle: '编辑部门',
                removeTitle: '删除部门'
            },
            callback: {
                onClick: function (e, treeId, treeNode) {
                    $.get('/tree.json', { id: treeNode.id }, function (res) {
                        if (res.rel) {
                            laytpl($('#detailTpl').html()).render(res.data, function (html) {
                                $('#detail').html(html);
                            });
                        } else {
                            layer.msg(res.msg);
                        }
                    });
                },
                beforeEditName: function (treeId, treeNode) {
                    $.get('/tree.json', { id: treeNode.id }, function (res) {
                        if (res.rel) {
                            var d = res.data;
                            d.departments = departments;
                            d.parentName = treeNode.name;
                            save('edit',d)
                        } else {
                            layer.msg(res.msg);
                        }
                    });
                    return false;
                },
                beforeRemove: function (treeId, treeNode) {
                    layer.confirm('确定要删除 <span style="color:red;">' + treeNode.name + '</span> 么?', { title: '系统提示' }, function (index) {
                        layer.close(index);
                        loadIndex = utils.load(2);
                        $.post('/Department/Delete', { id: treeNode.id }, function (res) {
                            loadIndex && layer.close(loadIndex);
                            layer.msg(res.msg);
                            if (res.rel) {
                                var zTree = $.fn.zTree.getZTreeObj("ztree");
                                zTree.removeNode(treeNode);
                            }
                        });
                    });
                    return false;
                }
            }
        };
        //初始化
        $.fn.zTree.init($("#ztree"), setting, zNodes);
        //绑定选择部门相关事件
        function bindSelectedDepartmentEvent() {

            $('#select-department').off('click').on('click', function () {
                showDepartment();
            });
            var setting = {
                view: {
                    dblClickExpand: false
                },
                callback: {
                    onClick: onClick
                }
            };
            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    v = "";
                nodes.sort(function compare(a, b) { return a.id - b.id; });
                for (var i = 0, l = nodes.length; i < l; i++) {
                    v += nodes[i].name + ",";
                }
                if (v.length > 0) v = v.substring(0, v.length - 1);
                var _parentId = $("#parentId");
                _parentId.attr("value", v);
                _parentId.attr("data-id", treeNode.id);
                hideDepartment();
            }

            function showDepartment() {
                $("#departmentContent").show();
                _body.on("mousedown", onBodyDown);
            }
            function hideDepartment() {
                $("#departmentContent").fadeOut('fast');
                _body.off("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "select-department" || event.target.id == "departmentContent" || $(event.target).parents("#departmentContent").length > 0)) {
                    hideDepartment();
                }
            }

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }
    });
</script>
          



</body>
</html>